<template>
  <div>
    <div>
      <el-table style="width: 100%"
                :data="shopList"
                border>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left"
                     inline
                     class="demo-table-expand">
              <el-form-item label="店铺名称">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="店铺地址">
                <span>{{ props.row.address }}</span>
              </el-form-item>
              <el-form-item label="店铺介绍">
                <span>{{ props.row.description }}</span>
              </el-form-item>
              <el-form-item label="店铺 ID">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="联系电话">
                <span>{{ props.row.phone }}</span>
              </el-form-item>
              <el-form-item label="评分">
                <span>{{ props.row.rating }}</span>
              </el-form-item>
              <el-form-item label="销售量">
                <span>{{ props.row.recent_order_num }}</span>
              </el-form-item>
              <el-form-item label="分类">
                <span>{{ props.row.category }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column header-align="center"
                         align="center"
                         prop="name"
                         label="店铺名称">
        </el-table-column>
        <el-table-column label="店铺地址"
                         align="center"
                         prop="address"
                         width="width">
        </el-table-column>
        <el-table-column label="店铺介绍"
                         prop="description"
                         align="center"
                         width="width">
        </el-table-column>
        <el-table-column label="操作"
                         prop="desc"
                         align="center"
                         width="300">
          <template slot-scope="{ row, $index }">
            <HintButton title="编辑"
                        size="mini"
                        icon="el-icon-edit"
                        type="primary"
                        v-if="$hasBP('btn.Spu.update')"
                        @click="emitShop(row)"></HintButton>
            <HintButton title="添加"
                        size="mini"
                        icon="el-icon-plus"
                        type="primary"
                        @click="addShop(row)"
                        v-if="$hasBP('btn.Spu.addsku')"></HintButton>
            <el-popconfirm :title="`你确定删除${row.name}吗?`"
                           @onConfirm="deleteShop(row)">
              <HintButton title="删除"
                          size="mini"
                          icon="el-icon-delete"
                          type="warning"
                          slot="reference"
                          v-if="$hasBP('btn.Spu.delete')"></HintButton>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination :current-page="1"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :page-sizes="[20, 30, 50]"
                     :page-size="limit"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
    <!-- 弹出框 -->
    <el-dialog title="修改店铺名称"
               :visible.sync="dialogVisible"
               width="width"
               :before-close="dialogBeforeClose">
      <el-form label-position="right"
               label-width="80px">
        <el-form-item label="店铺名称">
          <el-input v-model="name"></el-input>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="address"></el-input>
        </el-form-item>
        <el-form-item label="店铺介绍">
          <el-input v-model="description"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="phone"></el-input>
        </el-form-item>
        <el-form-item label="店铺分类">
          <el-cascader v-model="category"
                       :options="categoryList"></el-cascader>
        </el-form-item>
        <el-form-item label="店铺图片">
          <el-upload class="avatar-uploader"
                     action="dev-api/v1/addimg/shop"
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
            <img v-if="image_path"
                 :src="image_path"
                 class="avatar" />
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="save">确定</el-button>
          <el-button @click="cancle">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "shopList",
  data () {
    return {
      limit: 20,
      offset: 0,
      shopList: [], //商铺列表
      total: 0, //商铺数量
      dialogVisible: false,
      labelPosition: "right",
      id: 0, //餐馆Id
      name: "", //餐馆名称
      address: "", //餐馆地址
      description: "", //店铺介绍
      phone: 0, //商家电话
      category: [], //店铺分类
      image_path: "", //店铺图片地址
      categoryList: [] //所有商铺分类
    };
  },
  mounted () {
    this.getShopList(); //获取商家列表
    this.getShopNum(); //获取商家数量
    // console.log(this.$hasBP)
    // this.$hasBP('11111111')

  },
  methods: {
    // 获取商家列表
    async getShopList () {
      const result = await this.$API.shopList.getShopList({
        limit: this.limit,
        offset: this.offset
      });
      this.shopList = result;
    },
    // 获取商家数量
    async getShopNum () {
      const result = await this.$API.shopList.getShopNum();
      this.total = result.count;
    },
    // 点击切换页数
    handleCurrentChange (page) {
      if (this.offset === 0) {
        this.offset = 20;
      } else {
        this.offset = page * this.offset;
      }
      console.log(this.offset);
      this.getShopList();
    },
    // 点击切换页数
    handleSizeChange (size) {
      this.page = size;
      this.getShopList();
    },
    // 点击添加
    async emitShop (row) {
      this.id = row.id;
      this.name = row.name;
      this.address = row.address;
      this.description = row.description;
      this.phone = row.phone;
      this.category = row.category.split("/");
      this.image_path = row.image_path;
      this.rating = row.rating;
      this.recent_order_num = row.recent_order_num;
      this.dialogVisible = true;
      const result = await this.$API.shopList.emitShop();
      result.forEach(item => {
        if (item.sub_categories.length) {
          const addnew = {
            value: item.name,
            label: item.name,
            children: []
          };
          item.sub_categories.forEach((subitem, index) => {
            if (index == 0) {
              return;
            }
            addnew.children.push({
              value: subitem.name,
              label: subitem.name
            });
          });
          this.categoryList.push(addnew);
        }
      });
    },
    // 关闭dialog框
    dialogBeforeClose () {
      this.dialogVisible = false;
    },
    // 图片上传成功的回调
    handleAvatarSuccess (res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw);
      // console.log(res)
      this.image_path = "https://elm.cangdu.org/img/" + res.image_path;
    },
    // 图片上传之前的回调
    beforeAvatarUpload (file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 点击保存
    async save () {
      // 关闭dialog框
      this.dialogVisible = false;
      // 整理数据
      const {
        id,
        name,
        address,
        description,
        phone,
        image_path,
        category,
        rating,
        recent_order_num
      } = this;

      const data = {
        id,
        name,
        address,
        description,
        phone,
        image_path,
        category: category.join("/")
      };
      // 发送请求
      try {
        const result = await this.$API.shopList.updataShop(data);
        if (result.status === 1) {
          this.$message.success(result.success);
          this.getShopList();
        } else {
          this.$message.info(result.message);
          this.getShopList();
        }
      } catch (error) {
        this.$message.error("更新商铺信息失败");
      }
    },
    // 清空数据
    resetInfo () {
      (shopList = []), //商铺列表
        (total = 0), //商铺数量
        (id = 0), //餐馆Id
        (name = ""), //餐馆名称
        (address = ""), //餐馆地址
        (description = ""), //店铺介绍
        (phone = 0), //商家电话
        (category = []), //店铺分类
        (image_path = ""), //店铺图片地址
        (categoryList = []); //所有商铺分类
    },
    // 点击取消
    cancle () {
      this.$message.info("取消更新店铺");
      this.dialogVisible = false;
      this.getShopList();
    },
    // 添加商铺
    addShop (row) {
      this.$router.push("/adddata/addfood?id=" + row.id);
    },
    // 删除商铺
    deleteShop (row) {
      this.shopList.splice(this.shopList.find((item) => item.id === row.id), 1)
      this.$message.success('删除成功')
      // this.getShopList()
    }
  }
};
</script>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.el-table__header {
  font-size: 14px;
  color: #000;
  background-color: #99a9bf !important;
}
.el-table__header col {
  color: #000 !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
